<template>
  <div class="main">
    <div class="part">
      <div class="p-title">
        <div class="title">宣传方案下载</div>
        <div class="search-warp">
          <el-input
            v-model="searchContent"
            placeholder="请输入关键词进行搜索"
            @change="getContentApi"
          >
            <template #append>
              <el-button :icon="Search" />
            </template>
          </el-input>
        </div>
      </div>
      <div class="p-cont">
        <div class="table-wrap">
          <el-table :data="distList" style="width: 100%" stripe>
            <!-- <el-table-column type="selection" /> -->
            <el-table-column prop="title" label="物料名称" width="300" />
            <el-table-column label="描述">
              <template #default="scope">
                {{ formatHtmlDes(scope.row.description, 20) }}
              </template>
            </el-table-column>
            <el-table-column prop="createDate" label="更新日期" width="300" />
            <el-table-column fixed="right" label="操作" width="120">
              <template #default="scope">
                <el-button
                  link
                  type="primary"
                  size="small"
                  @click="checkMessage(scope.row)"
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="del-btn">
          <div class="del-left">
            <!-- <el-button type="primary">批量删除</el-button> -->
          </div>
          <div class="del-right">
            <div class="page-right">
              <myPagination
                :total="listNum || 0"
                @currentChange="currentChange"
                ref="myPaginationRef"
              />
            </div>
          </div>
        </div>
        <div class="page">
          <!-- <div class="page-left">共{{ listNum }}条数据</div> -->
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="宣传方案详情">
      <div class="dialog-detail">
        <div class="dialog-item">
          <div class="label">标题:</div>
          <div class="content">{{ curMessage.title }}</div>
        </div>
        <div class="dialog-item">
          <div class="label">描述:</div>
          <div class="content">
            <!-- {{ curMessage.description }} -->
            <div v-html="curMessage.description" />
          </div>
        </div>
        <div
          class="dialog-item"
          v-if="curMessage.files && curMessage.files.length"
        >
          <div class="label">附件:</div>
          <div class="content">
            <div
              class="con-item"
              v-for="(file, index) in curMessage.files"
              :key="index"
            >
              <span>
                {{ file.title }}
              </span>
              <a
                v-if="file.url"
                class="down-href"
                :href="file.url"
                download=""
                target="_blank"
                style="color: rgb(64, 158, 255); cursor: pointer"
                >下载</a
              >
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, onMounted, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import myPagination from "@/components/myPagination.vue";
import {
  getContentManagements,
  getContentManagementDetail
} from "@/api/system";
import { formatHtmlDes } from "@/utils/tools";

const listNum = ref(0);
const myPaginationRef = ref();
const distList = ref([]);
const searchContent = ref<string>("");
const dialogVisible = ref(false);
const curMessage = ref({
  title: "",
  description: "",
  files: []
});

function currentChange() {
  getContentApi();
}

async function getContentApi() {
  const listRes = await getContentManagements({
    type: 2,
    skip:
      (myPaginationRef.value.currentPage - 1) *
      myPaginationRef.value.curPageSize,
    limit: myPaginationRef.value.curPageSize,
    search: searchContent.value
  });
  distList.value = listRes.list;
  if (myPaginationRef.value.currentPage === 1) {
    listNum.value = listRes.total;
  }
}

async function checkMessage(data) {
  // 获取详情
  const res = await getContentManagementDetail(data.id);
  curMessage.value = res;
  dialogVisible.value = true;
}

onMounted(() => {
  getContentApi();
});
</script>
<style scoped lang="scss">
::v-deep(.el-backtop) {
  display: none !important;
}

.search-warp {
  width: 300px;
}

.table-wrap {
  margin-top: 20px;
}

.del-btn {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .page-left {
    color: #bbb;
  }
}

.dialog-detail {
  .dialog-item {
    margin-top: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

    .label {
      width: 60px;
      font-weight: bold;
      color: #333;
    }

    .content {
      width: 400px;

      .con-item {
        margin-bottom: 10px;

        .down-href {
          margin-left: 20px;
        }
      }
    }
  }
}
</style>
